<template>
  <div class="register">
    <div class="title"><div class="back-wrapper"><back></back></div>注册</div>
    <div class="logo-wrapper"></div>
    <div class="form">
      <div class="line-item">
        <label class="name">手机号</label>
        <input type="text" class="ipt " placeholder="请输入手机号" >
      </div>
      <div class="line-1px">
      </div>
      <div class="line-item">
        <label class="name">验证码</label>
        <input type="text" class="ipt " placeholder="请输入验证码" >
        <button class="btn-auth">获取验证码</button>
      </div>
      <div class="line-1px">
      </div>
      <div class="line-item">
        <label class="name">设置密码</label>
        <input type="password" class="ipt " placeholder="请设置6-12位密码" >
      </div>
      <div class="line-1px">
      </div>
      <div class="line-item">
        <label class="name">确认密码</label>
        <input type="password" class="ipt" placeholder="请再次输入密码" >
      </div>
      <div class="line-1px">
      </div>
    </div>
    <div class="smt-wrapper">
      <button class="smt">登录</button>
    </div>

  </div>
</template>

<script>
  import back from '../../../components/back/back'
  export default {
    name: "register",
    components:{
      'back':back
    },
    data(){
      return{
        telLine:false,
        pwdLine:false,

      }
    },
    methods:{

    }
  }
</script>

<style scoped lang="stylus">
  .register
    user-select: none
    height calc(100% - 18px)
    color #ffffff
    background #101011
    .title
      position relative
      margin-top 10px
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      .back-wrapper
        position absolute
        left 0
        top 0
        width 36px
        height 22px
      .register
        position absolute
        color #ffffff
        right 16px
        font-size 14px
        line-height 22px
        top 4px
    .logo-wrapper
      height 134px
      background url("logo.svg")no-repeat center center /50px 50px
    .form
      .line-1px
        height 1px
        background #343434
        margin 0 35px
        .act-1px
          height 1px
          width 0
          transition width .3s
          background #F7C20F
          &.active
            width 100%
            transition width .3s
      .line-item
        position relative
        height 54px
        line-height 54px
        padding 0 32px
        font-size 0
        .btn-auth
          position absolute
          right 35px
          top 14px
          height 26px
          width 75px
          background none
          border 1px solid #F7C20F
          color #F7C20F
          font-size 12px
          border-radius 2px
          outline none
          &:active
            background #F7C20F
            color #333333
        .name
          display inline-block
          width 70px
          text-align left
          color #F7C20F
          font-size 16px
        .ipt
          width calc(100% - 90px)
          height 54px
          font-size 16px
          background none
          border none
          padding-left 20px
          outline none
          color #ffffff


    .smt-wrapper
      height 44px
      padding 0 36px
      padding-top 45px
      .smt
        height 44px
        width 100%
        text-align center
        line-height 44px
        background #F7C20F
        border none
        outline none
        border-radius 4px
        color #333333
        font-size 16px
        &:active
          background #ebb90e
    .forgetPwd-wrapper
      padding 0 36px
      text-align right
      margin-top 20px
      .forgetPwd
        color #F7C20F
        text-align right
        font-size 12px
</style>
